<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 图书馆座位预约系统</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入基础样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入系统设置页面专用样式 -->
    <link rel="stylesheet" href="css/system-settings.css">
</head>
<body>
    <div class="main-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-book-open"></i>
                    <span>图书馆管理系统</span>
                </div>
                <button class="close-btn" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <nav class="sidebar-menu">
                <a href="index.html" class="menu-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>系统概览</span>
                </a>
                <a href="seat-management.html" class="menu-item">
                    <i class="fas fa-chair"></i>
                    <span>座位管理</span>
                </a>
                <a href="booking-management.html" class="menu-item">
                    <i class="fas fa-calendar-alt"></i>
                    <span>预约管理</span>
                </a>
                <a href="user-management.html" class="menu-item">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
                <a href="data-analysis.html" class="menu-item">
                    <i class="fas fa-chart-line"></i>
                    <span>数据分析</span>
                </a>
                <a href="report-statistics.html" class="menu-item">
                    <i class="fas fa-file-alt"></i>
                    <span>报表统计</span>
                </a>
                <a href="system-settings.html" class="menu-item active">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">管理员</div>
                        <div class="user-role">系统管理员</div>
                    </div>
                </div>
                <button class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <div class="content-container">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1 class="page-title">系统设置</h1>
                </div>
                
                <div class="navbar-right">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索设置项...">
                    </div>
                    
                    <div class="notification-bell">
                        <i class="fas fa-bell"></i>
                        <span class="notification-count">3</span>
                    </div>
                    
                    <div class="theme-toggle">
                        <i class="fas fa-moon"></i>
                    </div>
                    
                    <div class="user-menu">
                        <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="content">
                <!-- 设置导航标签 -->
                <div class="settings-tabs">
                    <div class="tabs-container">
                        <button class="tab-btn active" data-tab="basic">
                            <i class="fas fa-info-circle"></i>
                            <span>基本设置</span>
                        </button>
                        <button class="tab-btn" data-tab="booking">
                            <i class="fas fa-calendar-check"></i>
                            <span>预约规则</span>
                        </button>
                        <button class="tab-btn" data-tab="user">
                            <i class="fas fa-user-cog"></i>
                            <span>用户设置</span>
                        </button>
                        <button class="tab-btn" data-tab="notification">
                            <i class="fas fa-bell"></i>
                            <span>通知设置</span>
                        </button>
                        <button class="tab-btn" data-tab="security">
                            <i class="fas fa-shield-alt"></i>
                            <span>安全设置</span>
                        </button>
                        <button class="tab-btn" data-tab="data">
                            <i class="fas fa-database"></i>
                            <span>数据维护</span>
                        </button>
                    </div>
                </div>
                
                <!-- 设置内容区域 -->
                <div class="settings-content">
                    <!-- 基本设置 -->
                    <div class="tab-content active" id="basic">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>系统信息</h3>
                                <p>配置系统基本信息和运行参数</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>系统名称</label>
                                    <input type="text" value="图书馆座位预约系统" placeholder="请输入系统名称">
                                </div>
                                <div class="form-group">
                                    <label>系统版本</label>
                                    <input type="text" value="v2.3.5" placeholder="请输入系统版本" disabled>
                                </div>
                                <div class="form-group">
                                    <label>系统描述</label>
                                    <textarea rows="3" placeholder="请输入系统描述">本系统用于图书馆座位的预约管理，支持在线预约、座位查询、数据统计等功能。</textarea>
                                </div>
                                <div class="form-group">
                                    <label>系统Logo</label>
                                    <div class="logo-upload">
                                        <img src="https://picsum.photos/id/24/100/100" alt="系统Logo" class="current-logo">
                                        <input type="file" id="logoUpload" accept="image/*">
                                        <label for="logoUpload" class="upload-btn">
                                            <i class="fas fa-upload"></i>
                                            上传新Logo
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>备案信息</label>
                                    <input type="text" value="ICP备12345678号" placeholder="请输入备案信息">
                                </div>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>运行参数</h3>
                                <p>配置系统运行相关参数</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>系统运行模式</label>
                                    <select>
                                        <option value="production">生产模式</option>
                                        <option value="development">开发模式</option>
                                        <option value="test">测试模式</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>默认语言</label>
                                    <select>
                                        <option value="zh-CN" selected>简体中文</option>
                                        <option value="en-US">English</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>默认时区</label>
                                    <select>
                                        <option value="Asia/Shanghai" selected>Asia/Shanghai</option>
                                        <option value="UTC">UTC</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>自动清理日志天数</label>
                                    <input type="number" value="30" min="1" max="365" placeholder="请输入自动清理日志天数">
                                </div>
                                <div class="form-group">
                                    <label>页面缓存时间(秒)</label>
                                    <input type="number" value="600" min="0" max="3600" placeholder="请输入页面缓存时间">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 预约规则 -->
                    <div class="tab-content" id="booking">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>预约规则设置</h3>
                                <p>配置座位预约的基本规则</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>每人最大预约座位数</label>
                                    <input type="number" value="1" min="1" max="5" placeholder="请输入每人最大预约座位数">
                                </div>
                                <div class="form-group">
                                    <label>提前预约天数</label>
                                    <input type="number" value="7" min="1" max="30" placeholder="请输入提前预约天数">
                                </div>
                                <div class="form-group">
                                    <label>单次最长预约时长(小时)</label>
                                    <input type="number" value="4" min="1" max="12" placeholder="请输入单次最长预约时长">
                                </div>
                                <div class="form-group">
                                    <label>预约取消提前时间(分钟)</label>
                                    <input type="number" value="30" min="5" max="120" placeholder="请输入预约取消提前时间">
                                </div>
                                <div class="form-group">
                                    <label>迟到容忍时间(分钟)</label>
                                    <input type="number" value="15" min="5" max="60" placeholder="请输入迟到容忍时间">
                                </div>
                                <div class="form-group">
                                    <label>每日预约开始时间</label>
                                    <input type="time" value="07:00">
                                </div>
                                <div class="form-group">
                                    <label>每日预约结束时间</label>
                                    <input type="time" value="22:00">
                                </div>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>违约规则设置</h3>
                                <p>配置预约违约相关规则</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>连续违约次数上限</label>
                                    <input type="number" value="3" min="1" max="10" placeholder="请输入连续违约次数上限">
                                </div>
                                <div class="form-group">
                                    <label>违约惩罚时长(天)</label>
                                    <input type="number" value="7" min="1" max="30" placeholder="请输入违约惩罚时长">
                                </div>
                                <div class="form-group">
                                    <label>违约自动取消</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>违约记录保留时长(天)</label>
                                    <input type="number" value="90" min="30" max="365" placeholder="请输入违约记录保留时长">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户设置 -->
                    <div class="tab-content" id="user">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>用户注册设置</h3>
                                <p>配置用户注册和登录相关设置</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>开放注册</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>注册需审核</label>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>验证码登录</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>密码复杂度要求</label>
                                    <select>
                                        <option value="low">低（6位以上）</option>
                                        <option value="medium" selected>中（8位以上，包含字母数字）</option>
                                        <option value="high">高（10位以上，包含大小写字母、数字、特殊字符）</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>密码有效期(天)</label>
                                    <input type="number" value="90" min="0" max="365" placeholder="0表示永不过期">
                                </div>
                                <div class="form-group">
                                    <label>登录失败次数限制</label>
                                    <input type="number" value="5" min="1" max="10" placeholder="请输入登录失败次数限制">
                                </div>
                                <div class="form-group">
                                    <label>登录失败锁定时长(分钟)</label>
                                    <input type="number" value="30" min="5" max="1440" placeholder="请输入登录失败锁定时长">
                                </div>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>用户权限设置</h3>
                                <p>配置不同用户角色的权限</p>
                            </div>
                            <div class="settings-body">
                                <div class="role-permissions">
                                    <div class="role-title">
                                        <h4>学生</h4>
                                    </div>
                                    <div class="permissions-list">
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>预约座位</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>查看个人预约记录</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>修改个人信息</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox">
                                            <span>查看统计数据</span>
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="role-permissions">
                                    <div class="role-title">
                                        <h4>教师</h4>
                                    </div>
                                    <div class="permissions-list">
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>预约座位</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>查看个人预约记录</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>修改个人信息</span>
                                        </label>
                                        <label class="permission-item">
                                            <input type="checkbox" checked>
                                            <span>查看统计数据</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 通知设置 -->
                    <div class="tab-content" id="notification">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>通知方式设置</h3>
                                <p>配置系统通知方式和触发条件</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>站内通知</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>邮件通知</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>短信通知</label>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                
                                <h4 style="margin-top: 20px; margin-bottom: 10px;">通知触发条件</h4>
                                
                                <div class="notification-trigger">
                                    <label class="permission-item">
                                        <input type="checkbox" checked>
                                        <span>预约成功时</span>
                                    </label>
                                    <label class="permission-item">
                                        <input type="checkbox" checked>
                                        <span>预约取消时</span>
                                    </label>
                                    <label class="permission-item">
                                        <input type="checkbox" checked>
                                        <span>预约即将开始时（提前30分钟）</span>
                                    </label>
                                    <label class="permission-item">
                                        <input type="checkbox" checked>
                                        <span>迟到提醒时</span>
                                    </label>
                                    <label class="permission-item">
                                        <input type="checkbox" checked>
                                        <span>违约处理时</span>
                                    </label>
                                    <label class="permission-item">
                                        <input type="checkbox">
                                        <span>系统维护通知</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>邮件服务器设置</h3>
                                <p>配置邮件发送服务器信息</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>SMTP服务器地址</label>
                                    <input type="text" value="smtp.example.com" placeholder="请输入SMTP服务器地址">
                                </div>
                                <div class="form-group">
                                    <label>SMTP服务器端口</label>
                                    <input type="number" value="465" placeholder="请输入SMTP服务器端口">
                                </div>
                                <div class="form-group">
                                    <label>发送邮件地址</label>
                                    <input type="email" value="library@example.com" placeholder="请输入发送邮件地址">
                                </div>
                                <div class="form-group">
                                    <label>发送邮件密码</label>
                                    <input type="password" value="********" placeholder="请输入发送邮件密码">
                                </div>
                                <div class="form-group">
                                    <label>邮件主题前缀</label>
                                    <input type="text" value="[图书馆座位预约系统]" placeholder="请输入邮件主题前缀">
                                </div>
                                <div class="form-group">
                                    <label>使用SSL/TLS</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <button class="test-email-btn">测试发送邮件</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 安全设置 -->
                    <div class="tab-content" id="security">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>安全配置</h3>
                                <p>配置系统安全相关设置</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>HTTPS强制跳转</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>XSS防护</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>CSRF防护</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>IP访问限制</label>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group ip-whitelist" style="display: none;">
                                    <label>IP白名单</label>
                                    <textarea rows="3" placeholder="每行一个IP地址，支持CIDR格式"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>会话超时时间(分钟)</label>
                                    <input type="number" value="30" min="5" max="120" placeholder="请输入会话超时时间">
                                </div>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>日志设置</h3>
                                <p>配置系统日志记录设置</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>日志级别</label>
                                    <select>
                                        <option value="debug">Debug</option>
                                        <option value="info" selected>Info</option>
                                        <option value="warn">Warn</option>
                                        <option value="error">Error</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>记录详细访问日志</label>
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>记录操作日志</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>记录异常日志</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>日志文件保留天数</label>
                                    <input type="number" value="30" min="1" max="365" placeholder="请输入日志文件保留天数">
                                </div>
                                <button class="view-logs-btn">查看日志</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据维护 -->
                    <div class="tab-content" id="data">
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>数据备份</h3>
                                <p>配置系统数据备份设置</p>
                            </div>
                            <div class="settings-body">
                                <div class="form-group">
                                    <label>自动备份</label>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>备份频率</label>
                                    <select>
                                        <option value="daily" selected>每天</option>
                                        <option value="weekly">每周</option>
                                        <option value="monthly">每月</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>备份时间</label>
                                    <input type="time" value="02:00">
                                </div>
                                <div class="form-group">
                                    <label>备份文件保留数量</label>
                                    <input type="number" value="7" min="1" max="30" placeholder="请输入备份文件保留数量">
                                </div>
                                <button class="backup-now-btn">立即备份</button>
                            </div>
                        </div>
                        
                        <div class="settings-card">
                            <div class="settings-header">
                                <h3>备份历史</h3>
                                <p>查看和管理备份文件</p>
                            </div>
                            <div class="settings-body">
                                <div class="backup-list">
                                    <div class="backup-item">
                                        <div class="backup-info">
                                            <div class="backup-name">backup_20231101_020000.sql.gz</div>
                                            <div class="backup-meta">
                                                <span class="backup-date">2023-11-01 02:00:00</span>
                                                <span class="backup-size">25.8 MB</span>
                                                <span class="backup-type">自动备份</span>
                                            </div>
                                        </div>
                                        <div class="backup-actions">
                                            <button class="restore-btn">恢复</button>
                                            <button class="download-backup-btn">下载</button>
                                            <button class="delete-backup-btn">删除</button>
                                        </div>
                                    </div>
                                    
                                    <div class="backup-item">
                                        <div class="backup-info">
                                            <div class="backup-name">backup_20231031_020000.sql.gz</div>
                                            <div class="backup-meta">
                                                <span class="backup-date">2023-10-31 02:00:00</span>
                                                <span class="backup-size">24.6 MB</span>
                                                <span class="backup-type">自动备份</span>
                                            </div>
                                        </div>
                                        <div class="backup-actions">
                                            <button class="restore-btn">恢复</button>
                                            <button class="download-backup-btn">下载</button>
                                            <button class="delete-backup-btn">删除</button>
                                        </div>
                                    </div>
                                    
                                    <div class="backup-item">
                                        <div class="backup-info">
                                            <div class="backup-name">backup_20231030_153000.sql.gz</div>
                                            <div class="backup-meta">
                                                <span class="backup-date">2023-10-30 15:30:00</span>
                                                <span class="backup-size">23.9 MB</span>
                                                <span class="backup-type">手动备份</span>
                                            </div>
                                        </div>
                                        <div class="backup-actions">
                                            <button class="restore-btn">恢复</button>
                                            <button class="download-backup-btn">下载</button>
                                            <button class="delete-backup-btn">删除</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="settings-actions">
                    <button class="reset-btn">重置</button>
                    <button class="save-btn">保存设置</button>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 加载动画 -->
    <div class="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>保存中...</p>
        </div>
    </div>
    
    <!-- 提示框 -->
    <div class="toast" style="display: none;"></div>
    
    <!-- 引入主JavaScript文件 -->
    <script src="js/main.js"></script>
    <!-- 引入系统设置页面专用JavaScript文件 -->
    <script src="js/system-settings.js"></script>
</body>
</html>